<template>
  <div>
    <el-dialog
      class="roomStatus"
      :visible.sync="visible"
      :title="dataForm.id ? $t('update') : type == 2 ? '办理入住' : '预约入住'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="52%"
      top="100px"
      :append-to-body="true"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmitHandle()"
        :label-width="$i18n.locale === 'en-US' ? '100px' : '90px'"
        class="dialogInner"
      >
        <h5>预订信息</h5>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item
              label="客户来源"
              prop="guestSourceId"
              style="width: 100%"
            >
              <el-select
                v-model="dataForm.guestSourceId"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in laiyuan"
                  :key="item.id"
                  :label="item.guestSource"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="guestName2">
              <el-input
                v-model="dataForm.guestName2"
                placeholder="客户姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="guestPhone">
              <el-input
                v-model="dataForm.guestPhone"
                placeholder="手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入住登记" prop="">
              <span class="addperBtn" @click="dialogFormVisible3 = true"
                >({{ personLen }})人</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="成人人数" prop="checkinGuests">
              <el-input
                v-model="dataForm.checkinGuests"
                placeholder="成人人数"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="儿童人数" prop="childCheckinNums">
              <el-input
                v-model="dataForm.childCheckinNums"
                placeholder="儿童人数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <h5>房间信息</h5>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="入住日期" prop="arriveDate">
              <el-date-picker
                v-model="dataForm.arriveDate"
                type="datetime"
                disabled
                placeholder="入住日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离店日期" prop="leaveDate">
              <el-date-picker
                disabled
                v-model="dataForm.leaveDate"
                type="datetime"
                placeholder="离店日期"
                style="width: 100%"
                >>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入住类型" prop="checkInType">
              <el-radio-group v-model="dataForm.detailFormList[0].checkInType">
                <el-radio :label="1">正常入住</el-radio>
                <el-radio :label="2">自用房</el-radio>
                <el-radio :label="3">免费入住</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="共几晚" prop="num">
              <el-input
                disabled
                v-model="dataForm.num"
                placeholder="共几晚"
                type="number"
                min="1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房型名称" prop="houseBaseId">
              <el-select
                v-model="dataForm.houseBaseId"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="(item, index) in houseBases"
                  :key="index"
                  :label="item.name"
                  :value="item.houseBaseId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房号" prop="roomNumber">
              <el-input
                v-model="dataForm.detailFormList[0].roomNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房价" prop="roomAmount">
              <el-input
                v-model="dataForm.detailFormList[0].roomAmount"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他消费" prop="otherAmount">
              <div class="addIcon">
                <span @click="dialogFormVisible = true">点击添加商品</span>
              </div>
            </el-form-item>
          </el-col>
          <el-table
            :data="dataForm.detailFormList[0].otherData"
            border
            style="width: 94%; margin-left: 35px; top: -20px"
          >
            <el-table-column
              prop="categoryName"
              label="名称"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="defaultPrice"
              label="单价"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="num"
              label="数量"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="total"
              label="总价"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.defaultPrice * scope.row.num }}
              </template>
            </el-table-column>
            <el-table-column
              prop="num"
              label="操作"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="small"
                  @click="delOther(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24">
            <el-form-item label="早餐金额" prop="breakfastAmount">
              <div class="addIcon">
                <span @click="dialogFormVisible2 = true">点击添加早餐</span>
              </div>
            </el-form-item>
          </el-col>
          <el-table
            :data="dataForm.detailFormList[0].breakfastData"
            border
            style="width: 94%; margin-left: 35px; top: -20px"
          >
            <el-table-column
              prop="breakfastName"
              label="名称"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="num"
              label="数量"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="total"
              label="总价"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.price * scope.row.num }}
              </template>
            </el-table-column>
            <el-table-column
              prop="num"
              label="操作"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="small"
                  @click="delBreakfast(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24">
            <el-form-item label="备注信息" prop="remarks">
              <el-input
                type="textarea"
                rows="2"
                v-model="dataForm.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer roomStatus">
        <div></div>
        <div class="right">
          <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
          <el-button type="primary" @click="dataFormSubmitHandle()">{{
            $t("confirm")
          }}</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :append-to-body="true"
      title="添加其他消费"
      :visible.sync="dialogFormVisible"
      class="diaBox roomStatus"
      width="30%"
    >
      <div class="item" v-for="(item, index) in otherList" :key="index">
        <span class="name">{{ item.projectName }}</span>
        <span class="price">{{ item.defaultPrice }}</span>
        <el-input-number
          v-model="item.num"
          :min="0"
          label=""
          size="small"
        ></el-input-number>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="left">
          <span>{{ total }}</span
          >件商品,共计<span
            >￥{{ dataForm.detailFormList[0].otherAmount }}</span
          >
        </div>
        <div class="right">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 添加早餐 -->
    <el-dialog
      title="添加早餐"
      :append-to-body="true"
      :visible.sync="dialogFormVisible2"
      class="diaBox roomStatus"
      width="30%"
    >
      <div class="item" v-for="(item, index) in breakfastList" :key="index">
        <span class="name">{{ item.breakfastName }}</span>
        <span class="price">{{ item.price }}</span>
        <el-input-number
          v-model="item.num"
          :min="0"
          label=""
          size="small"
        ></el-input-number>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="left">
          <span>{{ total2 }}</span
          >件商品, 共计<span
            >￥{{ this.dataForm.detailFormList[0].breakfastAmount }}</span
          >
        </div>
        <div class="right">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 添加入住人 -->
    <el-dialog
      class="roomStatus"
      :append-to-body="true"
      title="添加入住人"
      :visible.sync="dialogFormVisible3"
      width="40%"
      @close="initCheckIn()"
      @open="openCheckIn()"
    >
      <el-form
        :model="dataForm"
        label-width="70px"
        style="padding: 0 30px; max-height: 500px; overflow: auto"
      >
        <el-row
          :gutter="50"
          v-for="(item, index) in dataForm.detailFormList[0].checkInPersonList"
          :key="index"
        >
          <h5>入住人{{ index + 1 }}</h5>
          <el-col :span="12">
            <el-form-item
              label="姓名"
              :prop="'checkInPersonList.' + index + '.checkInName'"
              :rules="{
                required: true,
                message: $t('validate.required'),
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.checkInName"
                autocomplete="off"
                placeholder="入住人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="证件号"
              :prop="'checkInPersonList.' + index + '.idCard'"
              :rules="{
                required: true,
                message: $t('validate.required'),
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.idCard"
                autocomplete="off"
                placeholder="入住人证件号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="证件类型"
              :prop="'checkInPersonList.' + index + '.cardType'"
            >
              <el-select
                v-model="item.cardType"
                placeholder="请选择证件类型"
                clearable
                style="width: 100%"
              >
                <el-option
                  :label="item2.label"
                  :value="item2.value"
                  v-for="(item2, index2) in list2"
                  :key="index2"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="手机号"
              :prop="'checkInPersonList.' + index + '.checkInPhone'"
              :rules="{
                required: true,
                message: $t('validate.required'),
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.checkInPhone"
                autocomplete="off"
                placeholder="手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <i class="el-icon-delete del" @click="delPer(index)"></i>
        </el-row>
        <el-button
          type="primary"
          plain
          size="mini"
          @click="addPer()"
          style="margin: 0 0 30px 30px"
        >
          新增入住人
        </el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div></div>
        <div class="right">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
import template from "../devtools/template.vue";
export default {
  components: {
    template,
  },
  data() {
    return {
      visible: false,
      laiyuan: [],
      houseBases: [],
      otherList: [],
      breakfastList: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      total: 0, //其他支出几件
      total2: 0, //早餐份数
      list2: [
        {
          value: 0,
          label: "身份证",
        },
        {
          value: 1,
          label: "护照",
        },
        {
          value: 5,
          label: "台湾居民居住证",
        },
        {
          value: 6,
          label: "港澳居民居住证",
        },
      ],
      dataForm: {
        arriveDate: "",
        detailFormList: [
          {
            breakfastAmount: 0,
            checkInPersonList: [],
            checkInType: 0,
            id: 0,
            otherAmount: 0,
            roomAmount: 0,
            roomIds: "",
            roomNumber: "",
          },
        ],
        childCheckinNums: "",
        checkinGuests: "",
        guestName: "",
        guestName2:'',
        guestPhone: "",
        guestSourceId: null,
        homestayId: this.$store.state.user.homestayId,
        houseBaseId: 0,
        leaveDate: "",
        num: 0,
        orderStatus: null,
        remarks: "",
      },
      tempCheckInPersonList: [],//初始入住人备份
      tempGuestName: null,
       tempGuestName2: null,
      tempGuestPhone: null,
      personLen: 0,
      checkInPersonListConfirm:[],//确定新增的入住人
    };
  },
  props: ["roomsId", "type", "orderStatus"],
  computed: {
    // personLen() {
    //   let len = this.dataForm.detailFormList[0].checkInPersonList.filter(
    //     (item) => item.idCard != ""
    //   );
    //   return len.length;
    // },
    dataRule() {
      return {
        guestName2: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        guestPhone: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  created() {},
  watch: {
    otherList: {
      handler(newval, oldval) {
        let totalMoney = 0;
        let total = 0;
        for (let i = 0; i < newval.length; i++) {
          total += newval[i].num;
          totalMoney +=
            parseFloat(newval[i].num) * parseFloat(newval[i].defaultPrice);
        }
        this.total = total;
        this.dataForm.detailFormList[0].otherAmount = totalMoney;
        this.dataForm.detailFormList[0].otherData = newval.filter(
          (item) => item.num != 0
        );
      },
      deep: true,
    },
    breakfastList: {
      handler(newval, oldval) {
        let totalMoney = 0;
        let total = 0;
        for (let i = 0; i < newval.length; i++) {
          total += newval[i].num;
          totalMoney += newval[i].num * parseFloat(newval[i].price);
        }
        this.total2 = total;
        this.dataForm.detailFormList[0].breakfastAmount = totalMoney;
        this.dataForm.detailFormList[0].breakfastData = newval.filter(
          (item) => item.num != 0
        );
      },
      deep: true,
    },
  },
  methods: {
    //table 删除按钮操作早餐
    delBreakfast(i) {
      this.dataForm.detailFormList[0].breakfastData.splice(i, 1);
    },
    //table 删除按钮操作商品
    delOther(i) {
      this.dataForm.detailFormList[0].otherData.splice(i, 1);
    },

    addPer() {
      this.dataForm.detailFormList[0].checkInPersonList.push({
        cardType: "",
        checkInName: "",
        idCard: "",
        checkInPhone: "",
      });
    },
    delPer(index) {
      this.dataForm.detailFormList[0].checkInPersonList.splice(index, 1);
    },
    getLaiyuan() {
      this.$http
        .get("/hotel/guest/page", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            limit: 100,
            page: 1,
          },
        })
        .then((res) => {
          this.laiyuan = res.data.data.list;
        });
    },
    // 房型列表
    gethouseBases() {
      this.$http
        .get(
          `/hotel/house/base/getHouseSearchBox/${this.$store.state.user.homestayId}`
        )
        .then((res) => {
          this.houseBases = res.data.data;
        });
    },
    // 其他分类列表
    getOther() {
      this.$http
        .get("/hotel/other/expense/project/page", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            limit: 100,
            page: 1,
          },
        })
        .then((res) => {
          for (let i = 0; i < res.data.data.list.length; i++) {
            res.data.data.list[i].num = 0;
          }
          this.otherList = res.data.data.list;
        });
    },
    // 早餐
    getBreakfast() {
      this.$http
        .get("/hotel/house/breakfast/list", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            limit: 100,
            page: 1,
          },
        })
        .then((res) => {
          for (let i = 0; i < res.data.data.length; i++) {
            res.data.data[i].num = 0;
          }
          this.breakfastList = res.data.data;
        });
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.tempCheckInPersonList=[];
        this.checkInPersonListConfir=[];
        this.$refs["dataForm"].resetFields();
        this.getBreakfast();
        this.gethouseBases();
        this.getOther();
        this.dataForm.detailFormList[0].checkInPersonList = [];
        this.getLaiyuan();
        if (!this.dataForm.id) {
          this.getInfo();
        } else {
          setTimeout(() => {
            this.getInfo2();
          }, 1000);
        }
      });
    },
    // 获取简单信息
    getInfo() {
      this.$http
        .post(
          "/hotel/guest/room/getRoomInfoList",
          this.dataForm.id ? [this.dataForm.id] : this.roomsId
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm.detailFormList[0].roomIds = res.data.roomIds;
          this.dataForm.detailFormList[0].roomNumber = res.data.roomNumber;
          this.dataForm.detailFormList[0].checkInType = res.data.checkInType;
          this.dataForm.detailFormList[0].roomAmount = res.data.roomAmount;
          this.dataForm.arriveDate = res.data.arriveDate;
          this.dataForm.leaveDate = res.data.leaveDate;
          this.dataForm.houseBaseId = res.data.houseBaseId;
          this.dataForm.num = res.data.num;
        })
        .catch(() => {});
    },
    //获取详细信息
    getInfo2() {
      this.$http
        .get(`/hotel/order/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          //加密备用
          if (this.dataForm.detailFormList[0].checkInPersonList.length != 0) {
            this.tempCheckInPersonList = JSON.parse(
              JSON.stringify(this.dataForm.detailFormList[0].checkInPersonList)
            );
            this.checkInPersonListConfirm = JSON.parse(
              JSON.stringify(this.dataForm.detailFormList[0].checkInPersonList)
            );
          } //入住人集合
          this.personLen = this.tempCheckInPersonList.length;
          this.tempGuestName = this.dataForm.guestName;
          this.tempGuestPhone = this.dataForm.guestPhone;
          this.dataForm.guestName2= this.$CryptoJS.decrypt(this.dataForm.guestName2);
          this.tempGuestName2 = this.dataForm.guestName2;
          if (
            !this.dataForm.detailFormList[0].checkInPersonList ||
            this.dataForm.detailFormList[0].checkInPersonList.length == 0
          ) {
            this.addPer();
          }
          if (res.data.detailFormList[0].breakfastData) {
            for (let i = 0; i < this.breakfastList.length; i++) {
              let itemc = res.data.detailFormList[0].breakfastData.filter(
                (item) =>
                  item.breakfastName == this.breakfastList[i].breakfastName
              );
              if (itemc) {
                this.breakfastList[i].num = itemc[0].num;
              }
            }
          }
          if (res.data.detailFormList[0].otherData) {
            for (let i = 0; i < this.otherList.length; i++) {
              let item = res.data.detailFormList[0].otherData.filter(
                (item) => item.projectName == this.otherList[i].projectName
              );
              if (item) {
                this.otherList[i].num = item[0].num;
              }
            }
          }
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          //加密
          let newDataForm = JSON.parse(JSON.stringify(this.dataForm));
          if (
            newDataForm.guestName2 &&
            this.tempGuestName2 != newDataForm.guestName2
          ) {
            //编辑了
            newDataForm.guestName2 = this.$CryptoJS.encrypt(
              newDataForm.guestName2
            );
          } else {
            newDataForm.guestName2 = null;
          }
          newDataForm.guestName=newDataForm.guestName2;
          if (
            newDataForm.guestPhone &&
            this.tempGuestPhone != newDataForm.guestPhone
          ) {
            newDataForm.guestPhone = this.$CryptoJS.encrypt(
              newDataForm.guestPhone
            );
          } else {
            newDataForm.guestPhone = null;
          }
          let checkInPersonList = this.checkInPersonListConfirm || [];
          //入住人里面身份证
          checkInPersonList.forEach((element, i) => {
            //姓名 checkInName,idCard,checkInPhone
            //新增直接加密，编辑判断是否修改
            if (
              this.tempCheckInPersonList.length == 0 ||(!this.tempCheckInPersonList[i])||
              (element.checkInName &&
                element.checkInName !=
                  this.tempCheckInPersonList[i].checkInName)
            ) {
              element.checkInName = this.$CryptoJS.encrypt(element.checkInName);
            } else {
              element.checkInName =  this.checkInPersonListConfirm[i].checkInName2;
            }
            //身份证
            if (
              this.tempCheckInPersonList.length == 0 ||(!this.tempCheckInPersonList[i])||
              (element.idCard &&
                element.idCard != this.tempCheckInPersonList[i].idCard)
            ) {
              element.idCard = this.$CryptoJS.encrypt(element.idCard);
            } else {
              element.idCard =this.checkInPersonListConfirm[i].idCard2;
            }
            //手机号
            if (
              this.tempCheckInPersonList.length == 0 ||(!this.tempCheckInPersonList[i])||
              (element.checkInPhone &&
                element.checkInPhone !=
                  this.tempCheckInPersonList[i].checkInPhone)
            ) {
              element.checkInPhone = this.$CryptoJS.encrypt(
                element.checkInPhone
              );
            } else {
              element.checkInPhone =this.checkInPersonListConfirm[i].checkInPhone2;
            }
          });
          this.dataForm.detailFormList[0].otherData = this.otherList.filter(
            (item) => item.num > 0
          );
          newDataForm.detailFormList[0].breakfastData =
            this.breakfastList.filter((item) => item.num > 0);
          var url = "";
          var post = "";
          if (this.type == undefined) {
            //从详情页过来，编辑或者转成直接入住
            newDataForm.orderStatus = this.orderStatus;
            url = "/hotel/order";
            post = "put";
          } else {
            //从房态页面过来，预订或直接入住
            newDataForm.orderStatus = this.type;
            url = "/hotel/order/placeOrder";
            post = "post";
          }
          if (this.checkInPersonListConfirm) {
            newDataForm.detailFormList[0].checkInPersonList = JSON.parse(
              JSON.stringify(this.checkInPersonListConfirm)
            );
          }
          newDataForm.checkinGuests = parseFloat(newDataForm.checkinGuests);
          newDataForm.childCheckinNums = parseFloat(
            newDataForm.childCheckinNums
          );
          this.$http[post](url, newDataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
    initCheckIn() {
      this.dataForm.detailFormList[0].checkInPersonList = [];
    },
    openCheckIn() {
      if (this.checkInPersonListConfirm.length != 0) {
        this.dataForm.detailFormList[0].checkInPersonList = JSON.parse(
          JSON.stringify(this.checkInPersonListConfirm)
        ); //回显上次确定的入住人
      }
    },
    save() {
      let checkInPersonList = this.dataForm.detailFormList[0].checkInPersonList;
      for (let i in checkInPersonList) {
        if (checkInPersonList[i].checkInName == "") {
          return this.$message.error("请填写姓名");
        }
        if (checkInPersonList[i].idCard == "") {
          return this.$message.error("请填写证件号");
        }
        if (checkInPersonList[i].cardType === "") {
          return this.$message.error("请选择证件类型");
        }
        let idCard = checkInPersonList[i].idCard;
        if (idCard.indexOf("**") > -1) {
          idCard = idCard.replace(/\*/g, "1");
        }
        if (checkInPersonList[i].cardType === 0 && !this.$isIdCard(idCard))
          return this.$message.error("证件号格式不正确");
        let checkInPhone = checkInPersonList[i].checkInPhone;
        if (checkInPhone.indexOf("**") > -1) {
          checkInPhone = checkInPhone.replace(/\*/g, "5");
        }
        if (!this.$isMobile(checkInPhone))
          return this.$message.error("手机号格式不正确");
      }
      this.checkInPersonListConfirm = JSON.parse(
        JSON.stringify(this.dataForm.detailFormList[0].checkInPersonList)
      ); //备份确定的入住人
      this.personLen = this.checkInPersonListConfirm.length;
      this.dialogFormVisible3 = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.diaBox {
  .item {
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: #eaedf1;
    color: #293c73;
    padding: 16px 0;
    border-bottom: 1px solid #eaedf1;

    &:first-child {
      margin-top: 16px;
    }

    &:last-child {
      margin-bottom: 32px;
    }

    .name {
      font-size: 14px;
      font-weight: bold;
    }

    .price {
      flex: 1;
      text-align: center;
    }
  }
}

h5 {
  border-bottom: 1px solid #eee;
  margin-top: -10px;
  font-size: 14px;
  font-weight: bold;
  color: #293c73;
  padding: 16px 0 16px 11px;
  position: relative;

  &::after {
    display: block;
    content: "";
    height: 14px;
    top: 17px;
    left: 0;
    background: #1372ff;
    width: 3px;
    position: absolute;
  }
}

.el-icon-postcard {
  font-size: 20px;
}

.roomStatus {
  ::v-deep.el-dialog__footer {
    padding: 0 !important;
  }
}

.el-dialog {
  border-radius: 10px !important;

  .el-dialog__header {
    height: 64px;
    background: #fafbfe;
    border-radius: 10px 10px 0px 0px;

    span {
      font-size: 20px;
      font-weight: bold;
      color: #293c73;
    }
  }

  .el-dialog__body {
    padding: 0 20px;
  }

  .dialog-footer {
    background: #fafbfe;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-radius: 0 0 10px 10px;

    .left {
      font-size: 14px;
      color: #293c73;

      span {
        font-size: 16px;
        font-weight: bold;
        color: #ed5656;
        margin: 0 4px;
      }
    }
  }
}

.addIcon {
  text-align: right;

  span {
    color: #1372ff;
  }
}

::v-deep .el-radio {
  margin-right: 10px;
}

.addperBtn {
  width: 54px;
  height: 28px;
  background: rgba(19, 114, 255, 0.1);
  border-radius: 4px;
  font-size: 12px;
  color: #1372ff;
  display: inline-block;
  text-align: center;
  line-height: 28px;
}

.del {
  font-size: 18px;
  position: absolute;
  right: -3px;
  bottom: 31px;
  color: #f33;
}
</style>
